<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <p id="textblock">There are lots of different kinds of fruit - there are over
            500 varieties of banana alone. By the time we add the countless types of
            apples, oranges, and other well-known fruit, we are faced with thousands of
            choices.
        </p>
        <p>
            <button id="insert">Insert Element</button>
        </p>
        <script>
            document.getElementById("insert").onclick = function() {
                var textBlock = document.getElementById("textblock");
                // 得到p元素的Text对象
                textBlock.firstChild.splitText(10);
                console.log(textBlock.childNodes);
                // 默认返回切割后的后一个,挠头
                var newText = textBlock.childNodes[1].splitText(4);
                console.log(textBlock.childNodes);
                console.log(newText.previousSibling);
                // var newText = textBlock.childNodes[1].splitText(4).previousSibling;
                
                 textBlock.insertBefore(document.createElement("b"),
                     newText.previousSibling).appendChild(newText.previousSibling);
            }
        </script>
    </body>
</html>
